<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="b">
    <div id="all" style="padding-top: 20px">
        <div id="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- breadcrumb-->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <i class="fa fa-eye" style="padding-top: 2px"></i>当前位置:&nbsp;&nbsp;
                                <li class="breadcrumb-item"><a href="/">主页</a></li>
                                <li class="breadcrumb-item"><a href="/customer/personalCenter">个人中心</a></li>
                                <li class="breadcrumb-item"><span th:text="${title}"></span></li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-3 order-2 order-lg-1">
                        <!--
                        *** MENUS AND FILTERS ***
                        _________________________________________________________
                        -->
                        <div class="card sidebar-menu mb-4">
                            <div class="card-header">
                                <h3 class="h4 card-title">商品分类</h3>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-pills flex-column category-menu"
                                    th:each="goodsType:${goodsTypeList}">
                                    <li><a th:href="'/goods/list/1?typeId='+${goodsType.id}" class="nav-link active"
                                           th:text="${goodsType.name}"></a>
                                        <ul class="list-unstyled"
                                            th:each="smallGoodsType:${goodsType.smallGoodsTypeList}">
                                            <li><a th:href="'/goods/list/1?typeId='+${smallGoodsType.id}"
                                                   class="nav-link" th:text="${smallGoodsType.name}"></a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- *** MENUS AND FILTERS END ***-->
                    </div>
                    <div class="col-lg-9 order-1 order-lg-2">
                        <div id="productMain" class="row">
                            <div class="col-md-6">
                                <div data-slider-id="1" class="owl-carousel shop-detail-carousel">
                                    <div class="item"><img th:src="@{'/static/images/goodsImage/'+${goods.imageName}}"
                                                           alt="" class="img-fluid"></div>
                                    <div class="item"><img th:src="@{'/static/images/goodsImage/'+${goods.imageName}}"
                                                           alt="" class="img-fluid"></div>
                                    <div class="item"><img th:src="@{'/static/images/goodsImage/'+${goods.imageName}}"
                                                           alt="" class="img-fluid"></div>
                                </div>
                                <div class="ribbon new" th:if="${goods.isNew==1}">
                                    <div class="theribbon">新品</div>
                                    <div class="ribbon-background"></div>
                                </div>
                                <!-- /.ribbon-->
                                <div class="ribbon sale" th:if="${goods.hot==1}">
                                    <div class="theribbon">热卖</div>
                                    <div class="ribbon-background"></div>
                                </div>
                                <!-- /.ribbon-->
                                <div class="ribbon gift" th:if="${goods.specialPrice==1}">
                                    <div class="theribbon">特价</div>
                                    <div class="ribbon-background"></div>
                                </div>
                                <!-- /.ribbon-->
                                <div class="ribbon noStock" th:if="${goods.inventoryQuantity<1}">
                                    <div class="theribbon">售罄</div>
                                    <div class="ribbon-background"></div>
                                </div>
                                <!-- /.ribbon-->
                            </div>
                            <div class="col-md-6">
                                <div class="box">
                                    <h3 class="text-center" th:text="${goods.name}"></h3>
                                    <p class="goToDescription"><a href="#details" class="scroll-to">查看评论详情</a></p>
                                    <p class="price" th:text="'￥'+${goods.sellingPrice}"></p>
                                    <div class="form-inline">
                                        <p>总销量:</p>&nbsp;
                                        <p style="color: red" th:if="${allSaleTotal<=0}">0</p>
                                        <p th:text="${allSaleTotal}+'&nbsp;'" style="color: #0c9076"
                                           th:if="${allSaleTotal>0}"></p>
                                        <p th:text="${goods.unit}"></p>
                                    </div>
                                    <div class="form-inline">
                                        <p>当前库存:</p>&nbsp;
                                        <p th:text="${goods.inventoryQuantity}+'&nbsp;'" style="color: red"
                                           th:if="${goods.inventoryQuantity<1}"></p>
                                        <p th:text="${goods.inventoryQuantity}+'&nbsp;'" style="color: #0c9076"
                                           th:if="${goods.inventoryQuantity>0}"></p>
                                        <p th:text="${goods.unit}"></p>
                                    </div>
                                    <div class="form-inline">
                                        <p>厂家:</p>&nbsp;
                                        <p th:text="${goods.producer}"></p>
                                    </div>
                                    <h3 style="color: red"
                                        th:if="${goods.inventoryQuantity<1&&session.currentCustomer!=null}">
                                        当前商品库存为0,不可购买</h3>
                                    <div th:fragment="'div'+${goods.id}" th:id="'div'+${goods.id}" class="div11">
                                        <p class="text-center buttons">
                                            <a th:href="@{'/shopping/buy?goodsId='+${goods.id}}"
                                               class="btn btn-outline-success"
                                               th:if="${session.currentCustomer!=null&&goods.inventoryQuantity>0}"><i
                                                    class="fa fa-location-arrow"></i>购买</a>
                                            <a th:href="'javascript:addFavorite('+${goods.id}+')'"
                                               class="btn btn-outline-danger"
                                               th:if="${session.currentCustomer!=null&&goods.isFavorite==0}"><i
                                                    class="fa fa-heart"></i>收藏</a>
                                            <a th:href="'javascript:deleteFavorite('+${goods.id}+')'"
                                               class="btn btn-info"
                                               th:if="${session.currentCustomer!=null&&goods.isFavorite==1}"><i
                                                    class="fa fa-heart"></i>取消收藏</a>
                                            <a th:href="'javascript:addShoppingCart('+${goods.id}+')'"
                                               class="btn btn-outline-primary"
                                               th:if="${session.currentCustomer!=null&&goods.inventoryQuantity>0}"><i
                                                    class="fa fa-shopping-cart"></i>添加到购物车</a>
                                            <a href="/login" class="btn btn-danger" title="点击按钮后跳转到登录界面"
                                               th:if="${session.currentCustomer==null}"><i
                                                    class="fa fa-globe"></i>登录后方可购物</a>
                                        </p>
                                    </div>
                                </div>
                                <div data-slider-id="1" class="owl-thumbs">
                                    <button class="owl-thumb-item"><img
                                            th:src="@{'/static/images/goodsImage/'+${goods.imageName}}" alt=""
                                            class="img-fluid"></button>
                                    <button class="owl-thumb-item"><img
                                            th:src="@{'/static/images/goodsImage/'+${goods.imageName}}" alt=""
                                            class="img-fluid"></button>
                                    <button class="owl-thumb-item"><img
                                            th:src="@{'/static/images/goodsImage/'+${goods.imageName}}" alt=""
                                            class="img-fluid"></button>
                                </div>
                            </div>
                        </div>
                        <div id="checkout" class="col-lg-13">
                            <div class="box">
                                <div class="nav flex-column flex-md-row nav-pills text-center"><a
                                        th:href="'/goods/'+${goods.id}" title="查看商品详情"
                                        class="nav-link flex-sm-fill text-sm-center">
                                    <i class="fa fa-paw"> </i>商品详情</a><a
                                        class="nav-link flex-sm-fill text-sm-center active">
                                    <i class="fa fa-commenting-o"> </i>客户评论</a>
                                </div>
                                <!-- /.box-->
                                <div id="comments">
                                    <div id="details">
                                        <h4><span>共 </span><span th:text="${total}"></span> 条评论</h4>
                                        <div class="row comment" th:each="comment:${commentList}" th:if="${total>0}">
                                            <div class="col-md-3 col-lg-2 text-center text-md-center">
                                                <p>
                                                    <img th:src="@{'/static/images/customerImage/'+${comment.customer.imageName}}"
                                                         alt="" class="img-fluid rounded-circle"
                                                         style="width: 100px;height: 100px"></p>
                                            </div>
                                            <div class="col-md-9 col-lg-10">
                                                <h5 th:text="${comment.customer.contact}"></h5>
                                                <p class="posted"><i class="fa fa-clock-o"></i> <span
                                                        th:text="${#dates.format(comment.createDate,'yyyy-MM-dd HH:mm:ss')}"></span>
                                                </p>
                                                <p th:text="${comment.content}"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.comment-->
                                    <div class="pages" th:if="${total>4}">
                                        <nav aria-label="Page navigation example" class="d-flex justify-content-center">
                                            <ul class="pagination">
                                                <div th:utext="${pageCode}" class="form-inline"></div>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                            <div class="row same-height-row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="box same-height">
                                        <h3><i class="fa fa-heartbeat"></i>猜您喜欢</h3>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6" th:each="recommendGoods:${recommendGoodsList}"
                                     th:if="${recommendGoodsStat.count<=3}">
                                    <div class="product same-height">
                                        <div class="flip-container">
                                            <div class="flipper">
                                                <div class="front"><a th:href="'/goods/'+${recommendGoods.id}"><img
                                                        th:src="@{'/static/images/goodsImage/'+${recommendGoods.imageName}}"
                                                        alt="" class="img-fluid"></a></div>
                                                <div class="back"><a th:href="'/goods/'+${recommendGoods.id}"><img
                                                        th:src="@{'/static/images/goodsImage/'+${recommendGoods.imageName}}"
                                                        alt="" class="img-fluid"></a></div>
                                            </div>
                                        </div>
                                        <a th:href="'/goods/'+${recommendGoods.id}" class="invisible"><img
                                                th:src="@{'/static/images/goodsImage/'+${recommendGoods.imageName}}"
                                                alt=""
                                                class="img-fluid"></a>
                                        <div class="text">
                                            <a th:href="'/goods/'+${recommendGoods.id}" style="color: black"><h3
                                                    th:text="${recommendGoods.name}"
                                                    th:title="${recommendGoods.name}"></h3>
                                            </a>
                                            <p class="price" th:text="'￥'+${recommendGoods.sellingPrice}"></p>
                                        </div>
                                    </div>
                                    <!-- /.product-->
                                    <div class="ribbon new" th:if="${recommendGoods.isNew==1}">
                                        <div class="theribbon">新品</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                    <div class="ribbon sale" th:if="${recommendGoods.hot==1}">
                                        <div class="theribbon">热卖</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                    <div class="ribbon gift" th:if="${recommendGoods.specialPrice==1}">
                                        <div class="theribbon">特价</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                    <div class="ribbon noStock" th:if="${recommendGoods.inventoryQuantity<1}">
                                        <div class="theribbon">售罄</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                </div>
                            </div>
                            <div class="row same-height-row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="box same-height">
                                        <h3><i class="fa fa-history"></i>最近浏览</h3>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6" th:each="currentBrowse:${session.currentBrowse}">
                                    <div class="product same-height">
                                        <div class="flip-container">
                                            <div class="flipper">
                                                <div class="front"><a th:href="'/goods/'+${currentBrowse.id}"><img
                                                        th:src="@{'/static/images/goodsImage/'+${currentBrowse.imageName}}"
                                                        alt="" class="img-fluid"></a></div>
                                                <div class="back"><a th:href="'/goods/'+${currentBrowse.id}"><img
                                                        th:src="@{'/static/images/goodsImage/'+${currentBrowse.imageName}}"
                                                        alt="" class="img-fluid"></a></div>
                                            </div>
                                        </div>
                                        <a th:href="'/goods/'+${currentBrowse.id}" class="invisible"><img
                                                th:src="@{'/static/images/goodsImage/'+${currentBrowse.imageName}}"
                                                alt=""
                                                class="img-fluid"></a>
                                        <div class="text">
                                            <a th:href="'/goods/'+${currentBrowse.id}" style="color: black"><h3
                                                    th:text="${currentBrowse.name}"
                                                    th:title="${currentBrowse.name}"></h3>
                                            </a>
                                            <p class="price" th:text="'￥'+${currentBrowse.sellingPrice}"></p>
                                        </div>
                                    </div>
                                    <!-- /.product-->
                                    <div class="ribbon new" th:if="${currentBrowse.isNew==1}">
                                        <div class="theribbon">新品</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                    <div class="ribbon sale" th:if="${currentBrowse.hot==1}">
                                        <div class="theribbon">热卖</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                    <div class="ribbon gift" th:if="${currentBrowse.specialPrice==1}">
                                        <div class="theribbon">特价</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                    <div class="ribbon noStock" th:if="${currentBrowse.inventoryQuantity<1}">
                                        <div class="theribbon">售罄</div>
                                        <div class="ribbon-background"></div>
                                    </div>
                                    <!-- /.ribbon-->
                                </div>
                            </div>
                        </div>
                        <!-- /.col-md-9-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>